<template>
	<view class="cardstyle" :style="{'background-color': bgColor}">
		<slot name="header"></slot>
		
		<!-- 标题区域 -->
		<view class="titlebox">
			<!-- 模式2和3显示图片 -->
			<view class="imgbox" v-if="mode === 2 || mode === 3">
				<image :src="showImage" @error="handleImageException" mode="aspectFill"></image>
			</view>
			
			<view class="content-area">
				<!-- 模式3显示灰色标题 -->
				<text v-if="mode === 3" class="ad-title">{{ title }}</text>
				<!-- 其他模式正常显示 -->
				<text v-else class="normal-title">{{ title }}</text>
				
				<!-- 模式3显示多图广告区域 -->
				<view class="adbox" v-if="mode === 3">
					<view class="ad-images">
						<image 
							v-for="(img, index) in images" 
							:key="index" 
							:src="img" 
							@error="handleAdImageError(index)"
							mode="aspectFill"
							class="ad-image"
						></image>
					</view>
					<text class="ad-source">{{ author }}</text>
				</view>
			</view>
		</view>

		<!-- 底部信息区域 -->
		<view class="tips-box" v-if="mode !== 3">
			<text class="top-tag" v-if="isTop">置顶</text>
			<text class="author" :style="authorColor">{{ author }}</text>
			<text class="comments">{{ comments }}评</text>
			<view class="time-wrapper">
				<text class="time">{{ timedata }}</text>
			</view>
		</view>
		
		<!-- 广告模式的底部信息 -->
		<view class="ad-tips-box" v-if="mode === 3">
			<text class="ad-author">{{ author }}</text>
			<text class="ad-comments">{{ comments }}评</text>
		</view>

		<slot name="tips" v-if="showSearch"></slot>
		<slot name="footer"></slot>
	</view>
</template>

<script>
	export default {
		name: "CardViewText",
		data() {
			return {
				defaultPic: "/static/logo.png",
				failPic: "/static/logo.png",
				imageError: false,
				adImageErrors: {}
			};
		},
		computed: {
			showImage() {
				if (!this.images || this.images.length === 0) {
					console.log("showImage Default-->" + this.title);
					return this.defaultPic;
				}
				
				if (this.imageError) {
					console.log("showImage Error-->" + this.title);
					return this.failPic;
				}
				
				return this.images[0];
			},
			authorColor() {
				return this.isTop ? 'color: #f00;' : 'color: #666;';
			},
			bgColor() {
				// 根据模式设置不同背景色
				switch(this.mode) {
					case 1: return '#ffffff'; // 置顶新闻
					case 2: return '#f8f9fa'; // 普通新闻
					case 3: return '#f0f2f5'; // 广告
					default: return '#ffffff';
				}
			}
		},
		methods: {
			handleImageException() {
				console.log("handleImageException: " + this.title);
				this.imageError = true;
			},
			handleAdImageError(index) {
				console.log("广告图片加载失败: " + index);
				this.$set(this.adImageErrors, index, true);
				// 替换为默认图片
				if (this.images && this.images[index]) {
					this.$set(this.images, index, this.failPic);
				}
			}
		},
		props: {
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false
			},
			author: {
				type: String,
				default: "来源"
			},
			comments: {
				type: String,
				default: "0"
			},
			timedata: {
				type: String,
				default: "2000.01.01"
			},
			mode: {
				type: Number,
				default: 1,
				require: true
			},
			images: {
				type: Array,
				default: () => []
			},
			showSearch: {
				type: Boolean,
				default: false
			}
		}
	};
</script>

<style scoped>
	.cardstyle {
		background-color: #fff;
		padding: 24rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 20rpx;
	}

	.titlebox {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.imgbox {
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.imgbox image {
		width: 120rpx;
		height: 90rpx;
		border-radius: 8rpx;
	}

	.content-area {
		flex: 1;
	}

	.normal-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
	}

	.ad-title {
		font-size: 28rpx;
		color: #aaa;
		line-height: 1.4;
	}

	.adbox {
		margin-top: 16rpx;
	}

	.ad-images {
		display: flex;
		gap: 10rpx;
		margin-bottom: 12rpx;
	}

	.ad-image {
		width: 80rpx;
		height: 60rpx;
		border-radius: 6rpx;
	}

	.ad-source {
		font-size: 24rpx;
		color: #999;
	}

	.tips-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.ad-tips-box {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		font-size: 22rpx;
		color: #999;
		gap: 20rpx;
	}

	.top-tag {
		color: #f00;
		font-weight: bold;
		margin-right: 20rpx;
		padding: 4rpx 12rpx;
		background: #ffeaea;
		border-radius: 6rpx;
		font-size: 20rpx;
	}

	.author {
		margin-right: 20rpx;
	}

	.comments {
		margin-right: auto;
	}

	.time-wrapper {
		display: flex;
		justify-content: flex-end;
	}

	.time {
		color: #999;
	}
</style>